<template>
  <div class="commodity-header">
    <span class="left_icon fa fa-2x fa-angle-left returnUpper" @click="goBack"></span>
    <div class="commodity-item">
      <a class="commodity" href="#merchandise">商品</a>
      <a class="details" href="#particulars">详情</a>
    </div>
    <span class="share"><img src="../../assets/tubiao/share.png" height="12" width="12"/></span>
  </div>
</template>

<script>
export default {
  name: 'commodity-header',
  methods: {
    goBack(){
      this.$router.push('/myMall');
    }
  }
};
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  a{
    color: #222222;
  }
  .commodity-header{
    background: white;
    width: 100vw;
    height: 80px;
    text-align: center;
    line-height: 80px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99999;
  }
  .returnUpper{
    position: absolute;
    top: 15px;
    left: 20px;
  }
  .commodity-item{
    font-size: 26px;
  }
  .commodity{
    display: inline-block;
    width: 100px;
    text-align: center;
  }
  .details{
    display: inline-block;
    width: 100px;
    text-align: center;
  }
  .share{
    position: absolute;
    top: 10px;
    right: 25px;
  }
  .share>img{
    width: 35px;
    height: 35px;
  }
</style>
